import React, {Component} from 'react';
import {Flex} from '@ant-design/react-native';
import {Text, Image, StyleSheet, View} from 'react-native';

const tabName = ['我要买车位', '我要租车位', '买二手车位'];
const tabImage = [require('~/assets/public/buypark.png'), require('~/assets/public/rentpark.png'), require('~/assets/public/second.png')];

class TabView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tab_type: 0,
        };
    }

    onSelect = (index) => {
        this.setState({
            tab_type: index,
        });
        this.props.onPress(index + 1);
    };

    render() {
        return (
            <Flex style={styles.tabView} justify="around">
                {tabName.map((name, index) => (
                    <Flex direction="column" key={index}>
                        <View>
                            {this.state.tab_type === index ? (
                                <Image style={styles.tabBtnImg} source={tabImage[index]} />
                            ) : (
                                <Text onPress={() => this.onSelect(index)} style={styles.tabName}>
                                    {name}
                                </Text>
                            )}
                        </View>
                        <View>
                            {this.state.tab_type === index ? (
                                <Text style={styles.tabMore} onPress={() => this.props.onMore(index + 1)}>
                                    查看更多
                                </Text>
                            ) : (
                                <Text style={styles.tabMore} />
                            )}
                        </View>
                    </Flex>
                ))}
            </Flex>
        );
    }
}

const styles = StyleSheet.create({
    tabView: {
        marginTop: 14,
        marginBottom: 5,
    },
    tabBtnImg: {
        width: 80,
        height: 22,
        resizeMode: 'contain',
    },
    tabName: {
        fontSize: 12,
        color: '#333333',
        fontWeight: 'bold',
        textAlign: 'center',
    },
    tabMore: {
        marginTop: 5,
        fontSize: 10,
        color: '#EC4F46',
        width: 80,
        textAlign: 'center',
    },
});

export default TabView;
